<template lang="pug">
.pacs-workflow
  .pacs-workflow-left
    mt-table(
      v-bind="tableProps"
    )
  .pacs-workflow-right
    el-steps(:active="activeStep" align-center)
      el-step(v-for="(item) in RegistrationStateoptions", :title="item.label" )
</template>
<script setup lang="ts">
import { type TableProps } from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import { type RegistrationEntity, RegistrationStateoptions } from "@scmt/api-pacs-registration";
import type { RegistrationWorkflowQueryParams } from "@scmt/api-pacs-registration-workflow";

const editingObj = ref<null | RegistrationEntity>(null);
const disabled = ref(false);
const $api = useApi();
const queryPramas = reactive<RegistrationWorkflowQueryParams>({
  pageNum: 1,
  pageSize: 20,
});
const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    let item = { registrationId: editingObj.value?.id ?? "registrationId" };
    const params = Object.assign(queryPramas, item, q);
    return $api.pacs.registrationWorkflow.queryAll(params);
  },
});
const activeStep = ref("0");
const tableProps = computed(() => {
  const { tableData } = toRefs(data);
  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value ?? [],
    columns: [
      {
        type: "index",
        label: "序号",
        width: "60px",
      },
      {
        prop: "createTime",
        label: "操作时间",
        tooltip: true,
        minWidth: "120px",
        format: "datetime"
      },
      {
        prop: "operateContent",
        label: "类型",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "operatePersonName",
        label: "操作人",
        tooltip: true,
        minWidth: "120px",
      },
    ],
  };
  return tableProps;
});
onMounted(() => {

});

//查询
const handleQuery = (q: any) => {
  editingObj.value = $api.pacs.registration.$$createEntity(q);
  activeStep.value = "0";
  if (editingObj.value.id) {
    activeStep.value = editingObj.value?.registrationState;
    return request("tableData");
  } else {
    const { tableData } = toRefs(data);
    tableData.value = [];
  }
};

defineExpose({
  handleQuery,
});

//监听登记单选择改变
watch(
  () => editingObj.value,
  (item) => {
    if (item && item.id) {
      disabled.value = false;
    } else {
      disabled.value = true;
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.pacs-workflow {
  overflow-y: hidden;
  height: 100%;
  display: flex;

  &-left {
    width: 40%;
    flex-shrink: 0;
    margin-right: var(--mt-margin);
  }

  &-right {
    padding-top: var(--mt-padding-large);
    flex: 1;
  }

  .mt-table {
    height: calc(100% - 0px);

    :deep(.mt-table__content) {
      height: 100%;
    }
  }
}
</style>